<template>
    <view class="pub_page pub_page_bg pub_crystal_goods_list pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="page_content">
                <div class="search_div">
                    <pub-search placeholder="请输入" :btnType="2" @click="toSearch" />
                </div>
                <div class="tab_box">
                    <div class="li" :class="[childCategoryId===li.id?'li_active':'']" v-for="(li,key) in categoryData.childList" :key="key" @click="categoryClick(li)">{{ li.name }}</div>
                </div>
                <z-paging ref="Zpaging" class="lis_box" v-model="list" @query="getList" :refresher-enabled="false" :fixed="false">
                    <div class="lis">
                        <crystalGoodsList :list="list" />
                    </div>
                </z-paging>
            </div>
        </div>
    </view>
</template>

<script>
import crystalGoodsList from '@/pages/crystalGoods/components/goodList.vue';
export default {
    components: { crystalGoodsList },
    data() {
        return {
            list: [],
            loadFinish: false,

            crystalCategoryId: '',
            childCategoryId: '',
            searchVal: ''
        };
    },
    computed: {
        headerConfig() {
            return {
                title: this.categoryData?.name,//标题栏内容
                header_color: 'rgba(0,0,0,0)',
                left_type: 3,
            }
        },
        categoryData() {
            return this.$constant?.crystalCategory?.find(li => li.id == this.crystalCategoryId) || {
                childList: []
            }
        }
    },
    onLoad(option) {
        // console.log(option);
        this.crystalCategoryId = option.crystalCategoryId || 1;
        setTimeout(() => {
            this.childCategoryId = this.categoryData?.childList?.[0].id
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    methods: {
        toSearch(data) {
            this.searchVal = data.searchVal
            this.loadFinish = false;
            setTimeout(() => {
                this.$comFun.openLoading();
                this.$refs.Zpaging.reload()
            }, 400);
        },
        categoryClick(li) {
            if (this.childCategoryId !== li.id) {
                this.childCategoryId = li.id;
                this.loadFinish = false;
                setTimeout(() => {
                    this.$comFun.openLoading();
                    this.$refs.Zpaging.reload()
                }, 400);
            }
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: 30,
                categoryId: this.childCategoryId,
                name: this.searchVal
            };
            const res = await this.$request.get('goods/getCrystalGoodsPage', data);
            this.$comFun.closeLoading();
            this.loadFinish = true;
            if (res.code == 200) {
                const list = res.result?.list || []
                this.$refs.Zpaging.complete(list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.pub_crystal_goods_list {
    .page_content {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-direction: column;

        .search_div {
            width: 100%;
            padding: 0 24rpx;
        }
        .tab_box {
            width: 100%;
            display: flex;
            overflow-x: auto;
            height: 120rpx;
            padding: 35rpx 24rpx 0 24rpx;

            .li {
                flex: 0 0 auto;
                height: 50rpx;
                line-height: 50rpx;
                color: rgba($color: #fff, $alpha: 0.7);
                font-size: 32rpx;
                position: relative;
                margin: 0 48rpx 0 0;
            }

            .li_active {
                color: #fff;
                font-weight: 700;
            }

            .li_active::before {
                width: 100%;
                height: 4rpx;
                border-radius: 2rpx;
                background-color: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
            }
        }

        .tab_box::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        .lis_box {
            width: 100%;
            flex: 1;

            .lis {
                padding: 0 24rpx;
            }
        }
    }
}
</style>
